import React, { useEffect, useRef, useState } from "react";
import useStorePage from "@/store/useStorePage";
import topPng from "./img/top.png";
import renPng from "./img/ren.png";
import bg2Png from './img/bg2.png';

import icon1 from './img/icon1.png';
import icon2 from './img/icon2.png';
import icon3 from './img/icon3.png';
import icon4 from './img/icon4.png';
import MyButton from "@/components/MyButton";
import "./index.less";

const Home = () => {
    const { setPage } = useStorePage();

    const handleToPage = () => {
        setPage('PhotoView');
    }

    useEffect(() => { }, []);
    return (
        <div className="home-page">
            <div className="bg2">
                <img style={{ marginTop: 60, marginLeft: 60 }} src={bg2Png} alt="" />
            </div>
            <div className="content">
                <img style={{ marginTop: 20, marginLeft: 100 }} className="top-img" src={topPng} alt="" />
                <div className="ren-box" style={{ position: 'absolute', top: 540, left: 100 }}>
                    <img src={renPng} alt="" />
                </div>

                <div className="icon-1" style={{ position: 'absolute', top: 600, left: 100 }}>
                    <img src={icon1} alt="" />
                </div>
                <div className="icon-2" style={{ position: 'absolute', bottom: 550, left: 150 }}>
                    <img src={icon2} alt="" />
                </div>
                <div className="icon-3" style={{ position: 'absolute', bottom: 400, right: 100 }}>
                    <img src={icon3} alt="" />
                </div>
                <div className="icon-4" style={{ position: 'absolute', top: 400, right: 100 }}>
                    <img src={icon4} alt="" />
                </div>

                <div className="btn">
                    <MyButton onClick={handleToPage}>点击互动</MyButton>
                </div>
            </div>
        </div>
    )
};
export default Home;
